<template>
	<div ref="content">
		<el-drawer :visible.sync="drawer" :direction="direction" size="100%" @close="drawerClose">
		<div class="titleBox">目&nbsp;&nbsp;&nbsp;录</div>
		<div>
			<div style="font-size: 30px;margin-left: 10%;">一、服务器状态</div>
			<div v-for="[key, value] of Object.entries(allData)">
				<a :href="'#'+ value.lable">
					<span
						style="font-size: 26px;margin-left: 10%;">（{{value.lable}}){{value.type}}{{key}}详情</span>
				</a>
			</div>
		</div>
		<div>
			<div style="font-size: 30px;margin-left: 10%;">二、数据库状态</div>
			<div></div>
		</div>
		<div class="reLeftPDF">
			<div style="width:95%;margin: 10px auto;background-color: white;"
				v-for="[key, value] of Object.entries(allData)">
				<div class="reportTitleBox">
					<div style="font-size: 24px;color: red;font-weight: bold;" :id="value.lable">
						（{{value.lable}}){{value.type}}{{key}}详情</div>
					<el-button v-show="value.type == 'Network'" type="primary" @click="chooseDB(key)">
						丢包率
					</el-button>
				</div>
				<ReportContent :allData="value" />
			</div>
		</div>
		</el-drawer>
	</div>
</template>

<script>
	import {
		nodeAllData,
		deleteNode,
		addNode,
		editNode,
		submitAdmin,
		getManagementNodeOs,
		getServerData,
		addServer,
		deleteServer,
		postJavaServerData
	} from '@/api/index.js';
	import ReportContent from '../management/components/ReportContent.vue';
	import VDataBasePerformancefrom from "../management/components/DataBasePerformance.vue";
	export default {
		components: {
			ReportContent,
			VDataBasePerformancefrom
		},
		data() {
			return{
				id:'',
				dbosServerList:'',
				tableData:[],
				direction: 'rtl',
				drawer:true,
				DataBaseData:{},
				allData:{},
				isshow:false,
				areaType: {
					server: ["cpu", "memory", "network"],
					dataBase: ["back", "dbtime", "session", "io"],
				},
			}
		},
		created() {
			
		},
		mounted() {
			console.log(this.$route.params.id)
			this.getAllData()
		},
		methods:{
			async getAllData() {
				let res = await getServerData({
					icd: this.$route.params.id,
					name: '',
					bcid: ''
				})
				this.dbosServerList = res
				console.log("节点", res)
				if (res != null) {
					let db = res.DB
					let os = res.os
					if (db.length > 0) {
						db.forEach((item, index) => {
							this.tableData.push(item)
						})
					}
					if (os.length > 0) {
						os.forEach((item, index) => {
							this.tableData.push(item)
						})
					}
					console.log('table', this.tableData)
					this.getReport()
				}
			},
			drawerClose() {
				this.drawer = false
			},
			async getReport() {
					let db = this.dbosServerList.DB
					let os = this.dbosServerList.os
					console.log('有什么', os)
					const _postServerData = {
						b: db,
						time: this.dateformars(this.$route.params.time),
						time2: this.dateformars(this.$route.params.time2)
					};
					const _postDataBaseData = {
						a: os,
						time: this.dateformars(this.$route.params.time),
						time2: this.dateformars(this.$route.params.time2)
					};
					let res1 = await postJavaServerData('/Sp/dbPerformance', _postServerData)
					console.log('db', res1)
					this.disposeDataForDataBase(res1)
					let res2 = await postJavaServerData('/Sp/osPerformance', _postDataBaseData)
					console.log('os', res2)
					this.allData = res2
			},
			dateformars(timestamp) {
				let time = new Date(timestamp)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let date = time.getDate()
				let hours = time.getHours()
				let minute = time.getMinutes()
				let second = time.getSeconds()
			
				if (month < 10) {
					month = '0' + month
				}
				if (date < 10) {
					date = '0' + date
				}
				if (hours < 10) {
					hours = '0' + hours
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			},
			disposeDataForDataBase(data) {
				let AreaData = {},
					_index,
					_ip,
					_type;
				for (const [key, value] of Object.entries(data)) {
					_index = this.areaType.dataBase.findIndex((item) => key.includes(item));
					if (_index !== -1) {
						_type = this.areaType.dataBase[_index];
						_ip = key.replace(_type, "");
						if (!AreaData[_ip]) {
							AreaData[_ip] = {};
						}
						AreaData[_ip][_type] = value;
					}
				}
				this.DataBaseData = AreaData;
				console.log(421, this.DataBaseData)
				
			},
		}
	}
</script>

<style>
	.titleBox {
		font-size: 40px;
		font-weight: bold;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.reLeftPDF {
		background-color: white;
		border-radius: 3px;
		width: 99%;
		height: auto;
	}
	
	.reportTitleBox {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		padding: 10px;
	}
</style>